<template>
    <div id="wrapper">
        <div class="login-register">
            <div class="login-box card">
                <div class="card-body">
                    <Form  class="floating-labels" ref="formInline" :model="formInline" action="javascript:void(0)" :rules="ruleInline">
                        <h3 class="box-title m-b-20 text-center">{{pkgInfo.alias}}</h3>
                        <Alert v-if="register.called" :type="register.type" closable>
                            {{register.message}}
                        </Alert>
                        <Form-item class="form-group"><!-- prop="user"-->
                            <div class="col-xs-12 m-t-md">
                                <c-input note-class='form-control' name="auth_user" note-label='电话号' type="text"  v-model="formInline.user"></c-input>
                            </div>
                        </Form-item>
                        <Form-item prop="password" class="form-group">
                            <div class="col-xs-12  m-t-md">
                                <c-input note-class='form-control' name="auth_pwd" note-label='密码' type="password" v-model="formInline.password"></c-input>
                            </div>
                        </Form-item>
                        <Form-item>
                            <div class="form-group text-center">
                                <div class="col-xs-12  m-t-md">
                                    <btn-submit class="btn btn-block btn-lg btn-info btn-rounded" type="submit" :p-click="handleSubmit('formInline')">登录</btn-submit>
                                </div>
                                <div class="col-sx-12 text-right">
                                    <span class="text-link" @click="registerModal">申请注册</span>
                                </div>
                            </div>
                        </Form-item>
                    </Form>
                </div>
            </div>
        </div>
        <operate-register ref="operate_register" @on-change="initSubmit"></operate-register>
    </div>
</template>
<script>
    import serAccess from 'serves/api-access'
    import {mapGetters,mapActions} from 'vuex'
    import {SET_FAR_STATUS,SET_REGION} from 'serves/data-status'
    import OperateRegister from './Register'
    export default{
        data(){
            const validateUser = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('用户名不能为空'));
                } else {
                    if (value.length!=11) {
                        callback(new Error("请填写11位电话号"))
                    }
                    callback();
                }
            };
            return{
                register: {
                    called: false,
                    message: '',
                    type: ''
                },
                formInline: {
                    user: '',
                    password: ''
                },
                ruleInline: {
                    /*user: [
                        { required: true, message: '请填写用户名', trigger: 'blur' },
                        { validator:validateUser, trigger: 'change' }
                    ],*/
                    password: [
                        { required: true, message: '请填写密码', trigger: 'blur' },
                        { type: 'string', min: 6, max:12,message: '密码长度应为6-12位', trigger: 'change' }
                    ]
                }
            }
        },
        components:{
            OperateRegister
        },
        computed: mapGetters({
            pkgInfo: 'pkg',
        }),
        mounted(){
            this.setUser({});
        },
        methods: {
            ...mapActions([
                'setUser',
            ]),
            handleSubmit(name) {
                return async ()=>{
                    const  valid = await this.$refs[name].validate();
                    if (valid) {
                        return await this.submitChange();
                    } else {
                        this.$Message.error('表单验证失败!');
                        return false;
                    }
                }
            },
            async submitChange(){
                const res =await serAccess.login({
                    phone:this.formInline.user,
                    password:this.formInline.password
                });
                if(res.code==1){
                    // this.$router.push({name: 'Home'});
                    this.setUser(res.data);
                    this.$router.push({name: 'Home'});
                    /*
                    * 获取远端配置项
                    * */
                    // SET_FAR_STATUS().then(() => {
                    //     this.$router.push({name: 'Home'});
                    // }, () => {
                    //     this.$Message.error('配置项获取错误!');
                    // });
                    return true;
                }else{
                    this.$Message.error(res.message+'!');
                    return false;
                }
            },
            registerModal(){
                this.$refs['operate_register'].handleOpen({});
            },
            initSubmit(state){
                if(typeof state == "object"){
                    this.$set(this,'register',{
                        called: true,
                        message: state.msg,
                        type: state.type
                    })
                }
            },
        }
    }
</script>
<style lang="scss">
    @import "../../styles/variable";
    @import "../../styles/pages/floating-label";
    .login-register{
        background-image:url(~assets/images/background/login-register.png);

        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        height: 100%;
        width: 100%;
        padding: 10% 0;
        position: fixed;
    }

    .login-box {
        width: 400px;
        margin: 0 auto;
        .footer {
            width: 100%;
            left: 0px;
            right: 0px;
        }
        .social {
            display: block;
            margin-bottom: 30px;
        }
    }
    #recoverform {
        display: none;
    }

    .login-sidebar {
        padding: 0px;
        margin-top: 0px;
        .login-box {
            right: 0px;
            position: absolute;
            height: 100%;
        }
    }
    .form-validation{
        &>div{
            margin-bottom: 24px;
        }
        .list-group{
            margin: 0;
            .form-control{
                padding: 2px 0;
                background-color: inherit;
                height: auto;
                input{
                    border: none;
                    height: 46px;
                }
            }
        }
        button{
            margin-top: 20px;
        }
    }

    .ivu-form-item-error-tip{
        color:$red
    }
    .form-material .form-group {
        overflow: auto;
    }
</style>